<template>
  <view class="v-steps">
    <view
      v-for="(item, index) in list"
      :key="index"
      class="v-steps-item"
      :class="{
        current: index === current,
        passed: current !== undefined && index < current
      }"
    >
      <view class="upper-part">
        <template v-if="index === current && status === 'error'">
          <image
            class="icon"
            src="@/static/icons/steps-error.svg"
          />
        </template>
        <template v-else-if="index === current && status === 'success'">
          <image
            class="icon"
            src="@/static/icons/steps-success.svg"
          />
        </template>
        <template v-else>
          <view class="dot">
            <view class="inner" />
          </view>
        </template>
        <view class="line" />
      </view>
      <view class="lower-part">
        <view class="title">
          {{ item.title }}
        </view>
        <view class="sub">
          {{ item.sub }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
defineProps<{
  current?: number;
  status?: 'normal' | 'error' | 'success';
  list?: {
    title: string;
    sub?: string;
  }[];
}>();
</script>

<style lang="scss" scoped>
.v-steps {
  display: flex;
  align-items: center;
  .v-steps-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12rpx;
    .upper-part {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .dot {
        position: relative;
        z-index: 1;
        height: 36rpx;
        width: 36rpx;
        border-radius: 50%;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        .inner {
          height: 16rpx;
          width: 16rpx;
          border-radius: 50%;
          background-color: #cccccc;
        }
      }
      .icon {
        position: relative;
        z-index: 1;
        height: 36rpx;
        width: 36rpx;
        border-radius: 50%;
      }
      .line {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 50%;
        width: 100%;
        height: 1px;
        border-bottom: 1px dashed #cccccc;
      }
    }
    .lower-part {
      display: flex;
      flex-direction: column;
      align-items: center;
      opacity: 0.6;
      .title {
        color: #333333;
        font-size: 24rpx;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
      }
      .sub {
        color: #999999;
        font-size: 20rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
      }
    }
    &.current {
      .upper-part {
        .dot {
          background-color: rgba(255, 47, 59, 0.102);
          .inner {
            background-color: #ff2f3b;
          }
        }
      }
      .lower-part {
        opacity: 1;
      }
    }
    &.passed {
      .upper-part {
        .dot {
          .inner {
            background-color: #ff2f3b;
          }
        }
      }
      .lower-part {
        opacity: 1;
      }
    }
    &:last-child {
      .upper-part .line {
        display: none;
      }
    }
  }
}
</style>
